import React, {Component} from 'react';
import {Motion, spring} from 'react-motion';
import './style.scss';

class Loading extends Component {
  static defaultProps = {
    mask: true
  }
  constructor (props) {
    super(props);
    this.state = {
      show: false
    };
  }

  componentDidMount () {
    this.setState({show: true});
  }

  fnHide = () => {
    console.log('loading hide');
    this.setState({show: false});
  }

  fnRest = () => {
    if (!this.state.show) {
      console.log('结束动画完成');
      this.props.close();
    }
  }

  render () {
    return (
      <Motion style={{opacity: spring(this.state.show ? 1 : 0), x: spring(this.state.show ? '-30px' : '0')}} onRest={this.fnRest}>
        {
          ({opacity, x}) => (
            <div className="zy-loading" style={{opacity}}>
              {
                this.props.mask ? (
                  <div className="zy-loading-mask">
                    <div className="loading"></div>
                  </div>
                ) : <div className="loading"></div>
              }
            </div>
          )
        }
      </Motion>
    )
  }
}

export default Loading;